<template>
  <div class="profile-info">
    <div class="top">个人简介</div>
    <div class="info">
      <Avatar style="color: #fff" :sex="info.sex" />
      <!--      <img class="avatar" src="../img/a.png" alt="" />-->
      <div class="name">
        {{ info.name }}

        <img
          v-if="info.sex === '女'"
          src="../../../../assets/images/sex-w.svg"
          alt=""
          class="sex"
        />
        <img
          v-else
          src="../../../../assets/images/sex-m.svg"
          alt=""
          class="sex"
        />
      </div>
      <!--      <img src="../img/tag.png" alt="" class="tag" />-->
      <svg
        class="tag"
        :class="'dp-' + info.dunpai"
        width="39"
        height="45"
        viewBox="0 0 39 45"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M37.2701 7.70216L19.6421 0.112793C19.2876 -0.0375977 18.8902 -0.0375977 18.5357 0.112793L0.913087 7.70216C0.359864 7.93849 0 8.48634 0 9.0879V27.4517C0 36.4805 15.5654 43.2588 18.5894 44.4888C18.917 44.6231 19.2769 44.6231 19.5991 44.4888C22.6231 43.2588 38.1885 36.4859 38.1885 27.4517V9.0879C38.1831 8.48634 37.8233 7.93849 37.2701 7.70216ZM19.0889 32.8872V24.17H13.0518L19.0889 11.6768V20.3887H25.126L19.0889 32.8872Z"
        />
      </svg>
    </div>
    <div class="d">
      <div class="zy-layout">
        <div class="node">所在国：{{ info.country }}</div>
        <div class="node">学校：{{ info.school }}</div>
        <div class="node">学历层次：{{ info.xlcc }}</div>
        <div class="node">专业：{{ info.zhuanye }}</div>
      </div>
      <div class="node">毕业时间：{{ info.bysj }}</div>
      <div class="node">证件：{{ info.identry }}</div>
    </div>
    <div class="tab-switch">
      <div class="title">报告概要</div>
      <ProfileCard
        :title="n.ProductName"
        :shieldSeq="n.ShieldSeq"
        v-for="n in node"
        :tip="n.SummaryValue"
        :key="n.ProductName"
        @click.native="activeTabIndex(n)"
      />
      <!--      <ProfileCard title="个人信用信息概要" />-->
      <!--      <ProfileCard type="error" title="教育背景" color="#FF5252" tip="不符" />-->
      <!--      <ProfileCard-->
      <!--        title="个人对外投资与任职及法人信息查询"-->
      <!--        tip="查询到相关信息（法人、股东、执行董事）"-->
      <!--      />-->
      <!--      <ProfileCard-->
      <!--        type="success"-->
      <!--        title="工作履历与表现核实"-->
      <!--        tip="签订竞业禁止协议"-->
      <!--      />-->
    </div>
  </div>
</template>

<script>
import ProfileCard from "./profileCard/ProfileCard.vue";
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    node: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    activeTabIndex(n) {
      // 1）个人身份基础信息核实、个人信用信息概要、、有限民事诉讼记录查询、药物负面记录查询
      //        点击的时候，页面中间的tab“个人信用信息概要” 展示在前面；
      // ProductName
      if (
        [
          "个人身份基础信息核实",
          "个人信用信息概要",
          "有限民事诉讼记录查询",
          "药物负面记录查询",
        ].indexOf(n.ProductName) !== -1
      ) {
        this.$emit("clickItem", 0);
        return;
      }
      // 个人对外投资与任职及法人信息查询（标准版）
      // 点击的时候，页面中间的tab“投资与任职及法人查询” 展示在前面
      if (
        [
          "个人对外投资与任职及法人信息查询（标准版）",
          "个人信用信息概要",
          "有限民事诉讼记录查询",
          "药物负面记录查询",
        ].indexOf(n.ProductName) !== -1
      ) {
        this.$emit("clickItem", 1);
        return;
      }
      //       1） 教育背景   点击的时候，页面中间的tab“教育背景” 展示在前面
      // 2） 工作履历核实 点击的时候，页面中间的tab“工作履历核实”展示在前面
      // 3） 工作表现鉴定   点击的时候，页面中间tab“工作表现鉴定”展示在前面
      // （tab“工作表现鉴定” 新增的，内容由后台给出）

      if (["教育背景"].indexOf(n.ProductName) !== -1) {
        this.$emit("clickItem", 2);
        return;
      }
      if (["工作履历核实"].indexOf(n.ProductName) !== -1) {
        this.$emit("clickItem", 3);
        return;
      }
      if (["工作表现鉴定"].indexOf(n.ProductName) !== -1) {
        this.$emit("clickItem", 4);
        return;
      }
    },
  },
  mounted: function() {},
  components: { ProfileCard },
};
</script>
<style lang="scss">
.profile-info {
  background-color: #1f2130;
  border-radius: 6px;
  overflow: hidden;
  /*height: calc(100vh - 110px);*/
  padding: 10px;
  .top {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 6px 10px 0;
    font-size: 20px;
    border-bottom: 1px solid #171928;
  }
  .info {
    display: flex;
    margin: 22px 10px;
    height: 50px;
    align-items: center;
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      padding: 0 20px;
      color: #787dab;
      font-size: 30px;
      .sex {
        width: 28px;
        height: 28px;
        margin-left: 10px;
      }
    }
    .tag {
      width: 38.2px;
      height: 44.6px;
      &.dp-4 {
        path {
          fill: #dd1825;
        }
      }
      &.dp-3 {
        path {
          fill: #f7b13c;
        }
      }
      &.dp-2 {
        path {
          fill: #0813dd;
        }
      }
      &.dp-1 {
        path {
          fill: #3c9418;
        }
      }
    }
  }
  .d {
    padding: 0 20px;
    margin-top: 32px;
    color: #787dab;
    font-size: 16px;
    .node {
      margin-bottom: 18px;
    }
    .zy-layout {
      display: flex;
      flex-wrap: wrap;
      .node {
        width: 50%;
      }
    }
  }
  .tab-switch {
    margin-top: 40px;
    .title {
      color: #fff;
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
